<template>
  <div>
    <h1>RTMP 推流示例</h1>
    <div style="display: flex">
      <el-input
        v-model="rtmpurl"
        style="width: 220px"
        placeholder="请输入rtmp推流地址"
      />
      <div style="margin:0 10px">
        推流帧数：
        <el-select
          v-model="trmpfps"
          class="m-2"
          placeholder="Select"
          style="width: 70px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <el-select v-model="selectedWindow" placeholder="选择窗口" @focus="fetchWindows">
        <el-option
          v-for="window in windows"
          :key="window.id"
          :label="window.name"
          :value="window.name" 
          
        />
      </el-select>
      <el-button type="primary" @click="startStream" plain>开始推流</el-button>
      <el-button @click="stopStream" plain>结束推流</el-button>
    </div>
    <p v-if="status">{{ status }}</p>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElLoading } from "element-plus";

const rtmpurl = ref("rtmp://192.168.1.112:1935/live/202401111410?sign=e8ca4a025af9c40bcad32498edf4b097");
const status = ref("");
const selectedWindow = ref(null);
const windows = ref([]);
let loadingInstance = null;
let trmpfps = ref("30");

const fetchWindows = () => {
  window.electron.getWindows();
};

window.electron.receiveWindows((sources) => {
  windows.value = sources;
  console.log(sources,'sources')
});

const startStream = async () => {
  loadingInstance = ElLoading.service({
    text: "正在启动推流服务……",
    background: "#000000ad",
  });

  try {
    status.value = "正在推流...";
    const input = `title=${selectedWindow.value}`; // 使用窗口标题
    console.log("Starting stream with input:", input); // 调试信息
    await window.electron.stream({ input, output: rtmpurl.value }); // 传递窗口标题
    status.value = "推流已启动，请查看控制台输出。";
  } catch (error) {
    console.error("推流失败:", error);
    status.value = "推流失败，请查看控制台输出。";
  } finally {
    if (loadingInstance) {
      loadingInstance.close();
    }
  }
};

const stopStream = () => {
  window.electron.stop();
  status.value = "推流已停止，请查看控制台输出。";
};
</script>

<style scoped>
/* 添加样式 */
</style>
